<template>
  <view class="index">
    <!-- 搜索框 -->
    <van-search
      shape="square"
      background="#eb4450"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->

    <view class="index_swiper">
      <!-- 设计 轮播图高度和图片一样  -->
      <swiper
        autoplay
        indicator-dots
        circular
      >
        <swiper-item
          v-for="(item,index) in swiperList"
          :key="index"
        >
          <image
            :src="item.image_src"
            mode="widthFix"
          />
        </swiper-item>
      </swiper>
    </view>

    <!-- 导航 -->
    <view class="index_nav">
      <view
        v-for="(item,index) in navList"
        :key="index"
        class="index_nav_item"
      >
        <image
          mode="widthFix"
          :src="item.image_src"
        />
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view
        class="floor_group"
        v-for="(item,index) in floorList"
        :key="index"
      >
        <view class="floor_title">
          <image
            mode="widthFix"
            :src="item.floor_title.image_src"
          />
        </view>
        <view class="floor_content">
          <view
            class="floor_item"
            v-for="(item2,index2) in item.product_list "
            :key="index2"
          >
            <image
              :mode="index2===0?'widthFix':'scaleToFill'"
              :src="item2.image_src"
            />

          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数字
      swiperList: [],
      // 导航数据
      navList: [],
      // 楼层数据
      floorList: [],
    };
  },
  async onLoad() {
    // const res=await uni.request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
    // uniapi 异步代码的时候 返回值是一个 数组
    // 第0个元素 如果 null 表示 成功 如果 请求失败了 第0个元素 会是一个状态码
    // 第1个元素 才是接口的返回值
    // 后面肯定会封装它异步
    // console.log(res);
    // this.swiperList=res[1].data.message;

    // 希望封装成功后的模样
    // 1 如果把自定义的函数挂载到 this上  vue的原型即可
    // 2 get函数如何封装才能实现   get({ url: "/home/swiperdata" })
    // this.swiperList = await this.get({ url: "/home/swiperdata" });
    // 会很慢吧 !!

    this.getSwiper();

    this.getNav();
    this.getFloor();

    // 10 + 20 + 30 = 60s
    // 10||20||30 = 30s

    // 解决 ?
  },
  methods: {
    // 获取轮播图
    async getSwiper() {
      this.swiperList = await this.get({ url: "/home/swiperdata" }); // 10s
    },
    // 获取导航
    async getNav() {
      this.navList = await this.get({ url: "/home/catitems" }); // 20s
    },
    // 获取楼层
    async getFloor() {
      this.floorList = await this.get({ url: "/home/floordata" }); // 30s
    },
  },
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}
.index_swiper {
  background-color: #fff;
  swiper {
    height: 340rpx;
  }
}
.index_nav {
  display: flex;
  background-color: #fff;
  .index_nav_item {
    flex: 1;
    padding: 20rpx;
  }
}

.floor {
  /* 
	大图 232 * 386
			 屏幕的宽度的三分之一 * 计算的高度 
			 232  /  386 = 250rpx / height
			 height = 250 * 386 /232 = 416rpx
	小图  208rpx
		1 : 第0张图片 直接使用 mode="widthFix"
		2 : 后4张图片 设置高度208rpx 同时 设置mode属性 fill

	 */
  .floor_group {
    .floor_title {
      padding: 10rpx;
    }
    .floor_content {
      // display: flex;
      // flex-wrap: wrap;
      // 清除浮动
      overflow: hidden;
      .floor_item {
        width: 33.33%;
        float: left;
        border: 3rpx solid #fff;
      }
      /* 前四个 nth-child(-n + 4)  */
      /* 后四个 nth-last-child(-n + 4) */
      .floor_item:nth-last-child(-n + 4) {
        height: 208rpx;
        image {
          height: 100%;
        }
      }
    }
  }
}
</style>